<template lang="html">
  <div>
    <div class="search">
        <div class="input">
            <p><label>属性名称：</label><el-input placeholder="请输入内容" v-model="pageData.storeName"></el-input></p>
             <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑
                </el-button>
                <el-button
                  size="mini"
                  @click="details(scope.row,1)">详情
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
              <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <el-form-item label="检测属性名称" prop="attrName">
                    <el-input v-model="pageData.attrName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="是否必须检测属性" prop="isNeed">
                   <el-select v-model="pageData.isNeed" placeholder="请选择">
                     <!-- <el-option
                       v-for="item in need"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option> -->
                  <el-option value="是">是</el-option>
                  <el-option value="否">否</el-option>

                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否输入属性" prop="isInput">
                    <el-select v-model="pageData.isInput" placeholder="请选择">
                      <el-option
                        v-for="item in isInput"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                     </el-select>
                   </el-form-item>
                   <el-form-item label="是否预设检测属性值" prop="isVal">
                     <el-select v-model="pageData.isVal" placeholder="请选择">
                       <el-option value="是">是</el-option>
                       <el-option value="否">否</el-option>
                      </el-select>
                    </el-form-item>
                  <el-form-item class="confirm">
                     <el-button type="primary" v-if="btnState == '1'" @click="upForm('post')">提交</el-button>
                     <el-button type="primary" v-if="btnState == '2'" @click="upForm('put')">更新</el-button>
                  </el-form-item>
              </el-form>
        </slot>
      </dialogVue>
  </div>
</template>

<script>
  import Data from './qualityOptionData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    optionList,
    delAttribute,
    addAttribute
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      this.getoptionList();
    },
    methods : {
      getoptionList (data) {
        this.pageData.loading = true;
          optionList(data).then(res=>{
            if (res.data.code == 'OK') {
              this.pageData.loading = false;
              this.total = res.data.data.total;
              this.list.tbody = res.data.data.records.map(item=>{
                 item.gmtCreate = this.switchTime(item.gmtCreate)
                 item.gmtUpdate = this.switchTime(item.gmtUpdate)
                 item.isNeed = item.isNeed == 'Y' ? '是' : '否'
                 item.isVal = item.isVal == 'Y' ? '是' : '否'
                 return item;
              });
            } else {
               setTimeout(()=>{
                 this.pageData.loading = false;
               },2000)
            }
          })
      },
      add () {
        this.pageData = {}
        this.btnState = '1'
        this.dialog = true;
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
      },
      search () {
        var data = {
          size : '10',
          attrName : this.pageData.storeName
        }
        this.getoptionList(data);
      },
      changeData (data) {
        this.dialog = data;
      },
      handSize (val) {
        var data = {
          current :val,
          size : '10'
        }
        this.getoptionList(data);
      },
      handleEdit (item) {
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
        this.btnState = '2'
        this.dialog = true;
        this.pageData.attrName = item.attrName;
        this.pageData.isNeed = item.isNeed;
        this.pageData.isInput = item.isInput;
        this.pageData.isVal = item.isVal;
        this.pageData.attrId = item.attrId;
      },
      details (item) {
        this.$router.push({
          name : 'addAttributeVal',
          query : {
            id : item.attrId
          }
        })
      },
      del (item) {
        this.delMessage(()=>{
          var id = [];
          id.push(item.attrId)
          delAttribute(id).then(res=>{
            if (res.data.code == 'OK') {
              this.$message.success('删除成功');
                this.getoptionList();
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      },
      upForm (method) {
        this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              let data = {
                attrName : this.pageData.attrName,
                // isNeed :  this.pageData.isNeed,
                isInput : this.pageData.isInput,
                isVal : this.pageData.isVal,
                attrId :this.pageData.attrId
              }
              data.isNeed = this.pageData.isNeed == '是' ? "Y" : 'N'
              data.isVal = this.pageData.isVal == '是' ? "Y" : 'N'
              data.isInput = this.pageData.isInput == '是' ? "Y" : 'N'
              addAttribute(data,method).then(res=>{
                if (res.data.code == 'OK') {
                    this.dialog = false;
                    this.getoptionList();
                    if (method == 'post') {
                        this.$message.success('新增成功');
                    } else {
                       this.$message.success('编辑成功');
                    }
                 }
              })
            }
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../../../styles/common.css";
</style>
